<template>
  <div class="ecuprocess-container">
    <h2 class="page-title">接口测试执行进度</h2>
    
    <div class="main-content no-shadow">
      <div class="section-header">
        <span>当前执行任务</span>
        <el-button type="primary" size="small" @click="refreshData">
          <i class="el-icon-refresh"></i> 刷新
        </el-button>
      </div>
      
      <div v-if="loading" class="loading-container">
        <el-skeleton :rows="5" animated />
      </div>
      
      <div v-else-if="currentTasks.length === 0" class="empty-tasks">
        <el-empty description="暂无执行中的任务"></el-empty>
      </div>
      
      <div v-else class="task-list">
        <div class="table-container no-shadow">
          <el-table 
            :data="currentTasks" 
            style="width: 100%; border: none !important; border-collapse: collapse !important; background: transparent !important; box-shadow: none !important;"
            :border="false"
            :stripe="false"
            :show-header="true"
            :header-row-style="headerRowStyle"
            :header-cell-style="headerCellStyle"
            :cell-style="cellStyle"
            :row-style="rowStyle"
            :fit="true"
            class="borderless-table custom-table"
            cellspacing="0"
            cellpadding="0">
            <el-table-column prop="taskId" label="任务ID" min-width="120" align="center"></el-table-column>
            <el-table-column prop="taskName" label="任务名称" min-width="180" align="center"></el-table-column>
            <el-table-column prop="startTime" label="开始时间" min-width="180" align="center"></el-table-column>
            <el-table-column prop="status" label="状态" min-width="100" align="center">
              <template slot-scope="scope">
                <el-tag :type="getStatusTagType(scope.row.status)">{{ scope.row.status }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="进度" min-width="180" align="center">
              <template slot-scope="scope">
                <el-progress :percentage="scope.row.progress" :status="getProgressStatus(scope.row.status)"></el-progress>
              </template>
            </el-table-column>
            <el-table-column label="操作" min-width="180" align="center">
              <template slot-scope="scope">
                <div class="operation-buttons">
                  <el-button size="mini" type="primary" @click="viewDetail(scope.row)">查看详情</el-button>
                  <template v-if="scope.row.status === '执行中'">
                    <el-button 
                      size="mini" 
                      type="danger" 
                      @click="stopTask(scope.row)">
                      停止执行
                    </el-button>
                  </template>
                  <template v-else-if="scope.row.status === '未执行' || scope.row.status === '执行完成'">
                    <el-button 
                      size="mini" 
                      type="success" 
                      @click="startTask(scope.row)">
                      开始执行
                    </el-button>
                  </template>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
        
        <div class="pagination-container">
          <el-pagination
            @size-change="handleCurrentTasksSizeChange"
            @current-change="handleCurrentTasksCurrentChange"
            :current-page="currentTasksPage"
            :page-sizes="[5, 10, 20, 50]"
            :page-size="currentTasksPageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="currentTasksTotal">
          </el-pagination>
        </div>
      </div>
      
      <!-- 历史执行记录部分 -->
      <div class="history-section no-shadow">
        <div class="section-header">
          <span>历史执行记录</span>
          <div>
            <el-date-picker
              v-model="dateRange"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions"
              size="small"
              style="margin-right: 10px;"
            ></el-date-picker>
            <el-button type="primary" size="small" @click="searchHistory">
              <i class="el-icon-search"></i> 查询
            </el-button>
          </div>
        </div>
        
        <div class="table-container no-shadow">
          <el-table 
            :data="historyTasks" 
            style="width: 100%; border: none !important; border-collapse: collapse !important; background: transparent !important; box-shadow: none !important;"
            :border="false"
            :stripe="false"
            :show-header="true"
            :header-row-style="headerRowStyle"
            :header-cell-style="headerCellStyle"
            :cell-style="cellStyle"
            :row-style="rowStyle"
            class="borderless-table custom-table"
            cellspacing="0"
            cellpadding="0">
            <el-table-column prop="taskId" label="任务ID" min-width="120" align="center"></el-table-column>
            <el-table-column prop="taskName" label="任务名称" min-width="180" align="center"></el-table-column>
            <el-table-column prop="startTime" label="开始时间" min-width="180" align="center"></el-table-column>
            <el-table-column prop="endTime" label="结束时间" min-width="180" align="center"></el-table-column>
            <el-table-column prop="status" label="状态" min-width="100" align="center">
              <template slot-scope="scope">
                <el-tag :type="getStatusTagType(scope.row.status)">{{ scope.row.status }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="duration" label="耗时(秒)" min-width="120" align="center"></el-table-column>
            <el-table-column prop="success" label="成功/总数" min-width="120" align="center"></el-table-column>
            <el-table-column label="操作" min-width="180" align="center">
              <template slot-scope="scope">
                <el-button size="mini" type="primary" @click="viewDetail(scope.row)">查看详情</el-button>
                <el-button size="mini" type="success" @click="generateReport(scope.row)">生成报告</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        
        <div class="pagination-container">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[3, 5, 10, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div>
      </div>
    </div>
    
    <!-- 任务详情对话框 -->
    <el-dialog title="任务执行详情" :visible.sync="detailDialogVisible" width="80%">
      <el-tabs v-model="activeTab">
        <el-tab-pane label="基本信息" name="basic">
          <el-descriptions border :column="2" class="centered-descriptions">
            <el-descriptions-item label="任务ID">{{ currentTask.taskId }}</el-descriptions-item>
            <el-descriptions-item label="任务名称">{{ currentTask.taskName }}</el-descriptions-item>
            <el-descriptions-item label="开始时间">{{ currentTask.startTime }}</el-descriptions-item>
            <el-descriptions-item label="结束时间">{{ currentTask.endTime || '进行中' }}</el-descriptions-item>
            <el-descriptions-item label="状态">
              <el-tag :type="getStatusTagType(currentTask.status)">{{ currentTask.status }}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="总用例数">{{ currentTask.totalCases }}</el-descriptions-item>
            <el-descriptions-item label="成功用例数">{{ currentTask.successCases }}</el-descriptions-item>
            <el-descriptions-item label="失败用例数">{{ currentTask.failedCases }}</el-descriptions-item>
          </el-descriptions>
        </el-tab-pane>
        
        <!-- 新增状态统计图表 Tab -->
        <el-tab-pane label="状态统计" name="statistics">
          <div class="statistics-container">
            <h2 class="main-title">用例执行状态分布</h2>
            
            <!-- 完全使用Element UI组件实现圆环 -->
            <div class="charts-layout">
              <!-- 左侧：大圆环 -->
              <div class="left-panel">
                <div class="main-progress-container">
                  <div class="status-title">总体分布</div>
                  <!-- 使用Element UI的进度条组件 -->
                  <el-progress 
                    type="dashboard" 
                    :percentage="getSuccessPercentage(currentTask)" 
                    :width="280"
                    :stroke-width="20"
                    color="#67C23A">
                    <div slot="format">
                      <!-- 中央显示数据 -->
                      <div class="dashboard-inner">
                        <div class="dashboard-stats">
                          <span class="big-number">{{ currentTask.totalCases || 0 }}</span>
                          <span class="big-label">总用例数</span>
                        </div>
                      </div>
                    </div>
                  </el-progress>
                  
                  <!-- 状态标识 -->
                  <div class="status-legend">
                    <div class="legend-item">
                      <span class="color-box success-color"></span>
                      <span>成功: {{ getSuccessPercentage(currentTask) }}%</span>
                    </div>
                    <div class="legend-item">
                      <span class="color-box fail-color"></span>
                      <span>失败: {{ getFailPercentage(currentTask) }}%</span>
                    </div>
                    <div class="legend-item">
                      <span class="color-box pending-color"></span>
                      <span>未执行: {{ getPendingPercentage(currentTask) }}%</span>
                    </div>
                    <div class="legend-item">
                      <span class="color-box skipped-color"></span>
                      <span>跳过: {{ getSkippedPercentage(currentTask) }}%</span>
                    </div>
                  </div>
                </div>
              </div>
              
              <!-- 右侧：四个小圆环 -->
              <div class="right-panel">
                <div class="mini-progress-row">
                  <div class="mini-progress-item">
                    <div class="status-label">成功</div>
                    <el-progress 
                      type="circle" 
                      :percentage="getSuccessPercentage(currentTask)"
                      :width="130"
                      :stroke-width="15"
                      color="#67C23A">
                    </el-progress>
                    <div class="status-number">{{ currentTask.successCases || 0 }} 个</div>
                  </div>
                  
                  <div class="mini-progress-item">
                    <div class="status-label">失败</div>
                    <el-progress 
                      type="circle" 
                      :percentage="getFailPercentage(currentTask)"
                      :width="130"
                      :stroke-width="15"
                      color="#F56C6C">
                    </el-progress>
                    <div class="status-number">{{ currentTask.failedCases || 0 }} 个</div>
                  </div>
                </div>
                
                <div class="mini-progress-row">
                  <div class="mini-progress-item">
                    <div class="status-label">未执行</div>
                    <el-progress 
                      type="circle" 
                      :percentage="getPendingPercentage(currentTask)"
                      :width="130"
                      :stroke-width="15"
                      color="#909399">
                    </el-progress>
                    <div class="status-number">{{ getPendingCases(currentTask) }} 个</div>
                  </div>
                  
                  <div class="mini-progress-item">
                    <div class="status-label">跳过</div>
                    <el-progress 
                      type="circle" 
                      :percentage="getSkippedPercentage(currentTask)"
                      :width="130"
                      :stroke-width="15"
                      color="#E6A23C">
                    </el-progress>
                    <div class="status-number">{{ currentTask.skippedCases || 0 }} 个</div>
                  </div>
                </div>
              </div>
            </div>
            
            <!-- 状态计数显示 -->
            <div class="status-counts">
              <div class="count-item success">
                <span class="count-dot"></span>
                <span class="count-label">成功: {{ currentTask.successCases || 0 }} 个</span>
              </div>
              <div class="count-item fail">
                <span class="count-dot"></span>
                <span class="count-label">失败: {{ currentTask.failedCases || 0 }} 个</span>
              </div>
              <div class="count-item pending">
                <span class="count-dot"></span>
                <span class="count-label">未执行: {{ getPendingCases(currentTask) }} 个</span>
              </div>
              <div class="count-item skipped">
                <span class="count-dot"></span>
                <span class="count-label">跳过: {{ currentTask.skippedCases || 0 }} 个</span>
              </div>
            </div>
            
            <!-- 保留并修改任务执行总括，移除红色边框 -->
            <div class="task-execution-summary">
              <div class="summary-header">任务执行总括</div>
              <div class="summary-body">
                <div class="summary-row">
                  <div class="summary-item">
                    <div class="summary-label">总用例数:</div>
                    <div class="summary-value">{{ currentTask.totalCases || 0 }}个</div>
                  </div>
                  <div class="summary-item">
                    <div class="summary-label">执行成功率:</div>
                    <div class="summary-value">{{ getSuccessPercentage(currentTask) }}% ({{ currentTask.successCases || 0 }}/{{ currentTask.totalCases || 0 }})</div>
                  </div>
                </div>
                <div class="summary-row">
                  <div class="summary-item">
                    <div class="summary-label">执行失败率:</div>
                    <div class="summary-value">{{ getFailPercentage(currentTask) }}% ({{ currentTask.failedCases || 0 }}/{{ currentTask.totalCases || 0 }})</div>
                  </div>
                  <div class="summary-item">
                    <div class="summary-label">未执行比例:</div>
                    <div class="summary-value">{{ getPendingPercentage(currentTask) }}% ({{ getPendingCases(currentTask) }}/{{ currentTask.totalCases || 0 }})</div>
                  </div>
                </div>
                <div class="summary-row">
                  <div class="summary-item">
                    <div class="summary-label">跳过比例:</div>
                    <div class="summary-value">{{ getSkippedPercentage(currentTask) }}% ({{ currentTask.skippedCases || 0 }}/{{ currentTask.totalCases || 0 }})</div>
                  </div>
                  <div class="summary-item">
                    <div class="summary-label">总耗时:</div>
                    <div class="summary-value">{{ currentTask.duration || calculateElapsedTime(currentTask) }} 秒</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>
        
        <el-tab-pane label="用例执行详情" name="cases">
          <el-table 
            :data="caseDetails" 
            style="width: 100%; border: none;" 
            :border="false"
            class="borderless-table"
            cellspacing="0"
            cellpadding="0">
            <el-table-column prop="caseId" label="用例ID" width="120" align="center"></el-table-column>
            <el-table-column prop="caseName" label="用例名称" align="center"></el-table-column>
            <el-table-column prop="executeTime" label="执行时间" width="180" align="center"></el-table-column>
            <el-table-column prop="status" label="状态" width="120" align="center">
              <template slot-scope="scope">
                <el-tag :type="getStatusTagType(scope.row.status)">{{ scope.row.status }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="duration" label="耗时(ms)" width="120" align="center"></el-table-column>
            <el-table-column label="详情" width="120" align="center">
              <template slot-scope="scope">
                <el-button type="text" @click="viewCaseInfo(scope.row)">查看详情</el-button>
              </template>
            </el-table-column>
            <el-table-column label="日志记录" width="120" align="center">
              <template slot-scope="scope">
                <el-button type="text" @click="viewCaseDetail(scope.row)">查看日志</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="日志信息" name="logs">
          <pre class="log-content">{{ logContent }}</pre>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
  </div>
</template>

<script>
// 导入 echarts 用于绘制图表
import * as echarts from 'echarts/core';
import { PieChart } from 'echarts/charts';
import { TitleComponent, TooltipComponent, LegendComponent } from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';

// 注册必须的组件
echarts.use([TitleComponent, TooltipComponent, LegendComponent, PieChart, CanvasRenderer]);

export default {
  name: 'EcuProcess',
  data() {
    return {
      loading: true,
      currentTasks: [],
      historyTasks: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      currentTasksPage: 1,
      currentTasksPageSize: 5,
      currentTasksTotal: 0,
      dateRange: [],
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      detailDialogVisible: false,
      currentTask: {},
      caseDetails: [],
      logContent: '',
      activeTab: 'basic',
      
      // 添加表格样式覆盖
      headerRowStyle: {
        border: 'none',
        borderBottom: 'none',
        borderTop: 'none',
        background: 'transparent'
      },
      headerCellStyle: {
        border: 'none',
        borderBottom: 'none',
        borderTop: 'none',
        background: 'transparent'
      },
      cellStyle: {
        border: 'none',
        borderBottom: 'none',
        borderTop: 'none',
        background: 'transparent'
      },
      rowStyle: {
        border: 'none',
        borderBottom: 'none',
        borderTop: 'none',
        background: 'transparent'
      },
      
      // 新增 executionChart 属性来存储图表实例
      executionChart: null,
      mainExecutionChart: null,
    }
  },
  created() {
    this.fetchData();
  },
  mounted() {
    this.fetchData();
    
    // 动态注入CSS来覆盖Element UI的表格线条和阴影
    this.$nextTick(() => {
      // 完全移除红色矩形框和所有阴影
      const style = document.createElement('style');
      style.innerHTML = `
        /* 移除所有表格和卡片的阴影与边框 */
        .no-shadow,
        .el-table,
        .el-card,
        .el-card__body,
        .el-card__header,
        .task-list,
        .history-section,
        .main-content,
        .section-header,
        .table-container {
          box-shadow: none !important;
          border: none !important;
          background-color: transparent !important;
          outline: none !important;
        }
        
        /* 移除所有分隔线和红色边框 */
        .el-table::before,
        .el-table:before,
        .el-table::after,
        .el-table:after,
        .task-list::before,
        .task-list::after,
        .history-section::before,
        .history-section::after,
        .table-container::before,
        .table-container::after {
          display: none !important;
          height: 0 !important;
          width: 0 !important;
          content: none !important;
          border: none !important;
          background-color: transparent !important;
          outline: none !important;
        }
        
        /* 让表格直接显示在页面上，无任何装饰 */
        .el-table__header,
        .el-table__body,
        .el-table__footer {
          margin: 0 !important;
          padding: 0 !important;
          border: none !important;
          background-color: transparent !important;
        }
      `;
      document.head.appendChild(style);
      
      // 添加对话框打开事件监听
      this.$on('opened', () => {
        console.log('Dialog opened, initializing charts...');
        this.initExecutionChart();
      });
      
      // 监听窗口大小变化，调整图表大小
      window.addEventListener('resize', this.resizeCharts);
    });
  },
  methods: {
    fetchData() {
      this.loading = true;
      
      // 模拟获取当前任务列表
      setTimeout(() => {
        const allCurrentTasks = [
          {
            taskId: 'TASK-001',
            taskName: '接口测试-每日构建',
            startTime: '2023-10-25 09:30:00',
            status: '未执行',
            progress: 0,
            totalCases: 150,
            successCases: 0,
            failedCases: 0
          },
          {
            taskId: 'TASK-002',
            taskName: '功能验证-预发布环境',
            startTime: '2023-10-25 10:15:00',
            status: '执行中',
            progress: 45,
            totalCases: 80,
            successCases: 36,
            failedCases: 0
          },
          {
            taskId: 'TASK-003',
            taskName: '性能测试-压力测试',
            startTime: '2023-10-25 10:30:00',
            status: '执行完成',
            progress: 100,
            totalCases: 200,
            successCases: 195,
            failedCases: 5
          },
          {
            taskId: 'TASK-004',
            taskName: '安全测试-漏洞扫描',
            startTime: '2023-10-25 10:45:00',
            status: '未执行',
            progress: 0,
            totalCases: 100,
            successCases: 0,
            failedCases: 0
          },
          {
            taskId: 'TASK-005',
            taskName: '兼容性测试-多浏览器',
            startTime: '2023-10-25 11:00:00',
            status: '未执行',
            progress: 0,
            totalCases: 120,
            successCases: 0,
            failedCases: 0
          },
          {
            taskId: 'TASK-006',
            taskName: '回归测试-核心功能',
            startTime: '2023-10-25 11:15:00',
            status: '执行中',
            progress: 15,
            totalCases: 180,
            successCases: 25,
            failedCases: 2
          },
          {
            taskId: 'TASK-007',
            taskName: '接口测试-数据验证',
            startTime: '2023-10-25 11:30:00',
            status: '未执行',
            progress: 0,
            totalCases: 90,
            successCases: 0,
            failedCases: 0
          }
        ];
        
        // 计算分页数据
        const start = (this.currentTasksPage - 1) * this.currentTasksPageSize;
        const end = start + this.currentTasksPageSize;
        this.currentTasks = allCurrentTasks.slice(start, end);
        this.currentTasksTotal = allCurrentTasks.length;
        
        // 模拟历史任务数据
        const allHistoryTasks = [
          {
            taskId: 'TASK-H001',
            taskName: '接口测试-冒烟测试',
            startTime: '2023-10-24 15:30:00',
            endTime: '2023-10-24 15:45:20',
            status: '成功',
            duration: 920,
            success: '45/45'
          },
          {
            taskId: 'TASK-H002',
            taskName: '接口测试-回归测试',
            startTime: '2023-10-23 09:30:00',
            endTime: '2023-10-23 10:15:30',
            status: '失败',
            duration: 2730,
            success: '120/135'
          },
          {
            taskId: 'TASK-H003',
            taskName: '功能验证-登录模块',
            startTime: '2023-10-22 14:20:00',
            endTime: '2023-10-22 14:35:12',
            status: '成功',
            duration: 912,
            success: '28/28'
          }
        ];
        
        // 设置历史记录数据、分页和总条数
        this.historyTasks = allHistoryTasks;
        this.total = allHistoryTasks.length; // 修改为实际数据长度，而不是硬编码的35
        
        this.loading = false;
      }, 1000);
    },
    refreshData() {
      this.fetchData();
      this.$message({
        message: '数据已刷新',
        type: 'success'
      });
    },
    getStatusTagType(status) {
      switch(status) {
        case '未执行':
          return 'info';
        case '执行中':
          return 'warning';
        case '执行完成':
          return 'success';
        default:
          return '';
      }
    },
    getProgressStatus(status) {
      switch(status) {
        case '未执行':
          return '';
        case '执行中':
          return '';
        case '执行完成':
          return 'success';
        default:
          return '';
      }
    },
    viewDetail(row) {
      this.currentTask = { ...row }; // 创建副本以避免引用问题
      
      // 如果没有跳过用例，初始化为0
      if (this.currentTask.skippedCases === undefined) {
        this.currentTask.skippedCases = 0;
      }
      
      this.detailDialogVisible = true;
      
      // 当对话框打开后初始化图表
      this.$nextTick(() => {
        setTimeout(() => {
          this.initExecutionChart();
          
          // 强制调整窗口大小以触发图表重绘
          window.dispatchEvent(new Event('resize'));
        }, 500); // 给对话框一些时间来完全渲染
      });
      
      // 模拟获取用例详情
      this.caseDetails = [
        {
          caseId: 'CASE-001',
          caseName: '用户登录-正常流程',
          executeTime: '2023-10-25 09:31:05',
          status: '成功',
          duration: 203
        },
        {
          caseId: 'CASE-002',
          caseName: '用户登录-密码错误',
          executeTime: '2023-10-25 09:31:25',
          status: '成功',
          duration: 198
        },
        {
          caseId: 'CASE-003',
          caseName: '用户注册-正常流程',
          executeTime: '2023-10-25 09:31:45',
          status: '失败',
          duration: 356
        }
      ];
      
      // 模拟日志内容
      this.logContent = `[2023-10-25 09:30:00] INFO: 开始执行任务 TASK-001
[2023-10-25 09:30:01] INFO: 初始化测试环境
[2023-10-25 09:30:05] INFO: 加载测试用例，共150个
[2023-10-25 09:31:00] INFO: 开始执行用例 CASE-001
[2023-10-25 09:31:05] INFO: 用例 CASE-001 执行完成，状态：成功
[2023-10-25 09:31:10] INFO: 开始执行用例 CASE-002
[2023-10-25 09:31:25] INFO: 用例 CASE-002 执行完成，状态：成功
[2023-10-25 09:31:30] INFO: 开始执行用例 CASE-003
[2023-10-25 09:31:45] ERROR: 用例 CASE-003 执行失败：API返回错误码500
[2023-10-25 09:31:46] INFO: 尝试重试用例 CASE-003
[2023-10-25 09:31:55] ERROR: 用例 CASE-003 重试失败：API返回错误码500
[2023-10-25 09:31:56] INFO: 用例 CASE-003 执行完成，状态：失败
[2023-10-25 09:32:00] INFO: 继续执行后续用例...`;
    },
    startTask(row) {
      // 直接开始执行，无需确认弹窗
      this.$set(row, 'status', '执行中');
      this.$set(row, 'progress', 0);
      this.$set(row, 'successCases', 0);
      this.$set(row, 'failedCases', 0);
      this.$set(row, 'startTime', new Date().toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit'
      }).replace(/\//g, '-'));
      
      this.$message({
        type: 'success',
        message: `任务 ${row.taskId} 已开始执行`
      });

      // 模拟任务执行过程
      const totalSteps = row.totalCases;
      let currentStep = 0;
      
      const progressInterval = setInterval(() => {
        if (currentStep < totalSteps && row.status === '执行中') {
          currentStep += 1;
          const progress = Math.floor((currentStep / totalSteps) * 100);
          
          this.$set(row, 'progress', progress);
          this.$set(row, 'successCases', currentStep);
          
          // 当进度达到100%时，完成任务
          if (progress >= 100) {
            clearInterval(progressInterval);
            this.completeTask(row);
          }
        } else {
          clearInterval(progressInterval);
        }
      }, 1000); // 每秒更新一次进度
    },
    stopTask(row) {
      this.$confirm('确定要停止执行该任务吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 更新任务状态为未执行
        this.$set(row, 'status', '未执行');
        this.$message({
          type: 'success',
          message: `任务 ${row.taskId} 已停止执行`
        });
      }).catch(() => {
        // 取消操作
      });
    },
    completeTask(row) {
      // 更新任务状态为执行完成
      this.$set(row, 'status', '执行完成');
      this.$set(row, 'progress', 100);
      
      // 获取当前时间
      const endTime = new Date().toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit'
      }).replace(/\//g, '-');
      
      // 计算任务持续时间（秒）
      const startDate = new Date(row.startTime.replace(/-/g, '/'));
      const endDate = new Date(endTime.replace(/-/g, '/'));
      const duration = Math.floor((endDate - startDate) / 1000);
      
      // 创建历史记录
      const historyRecord = {
        taskId: row.taskId,
        taskName: row.taskName,
        startTime: row.startTime,
        endTime: endTime,
        status: '成功',
        duration: duration,
        success: `${row.successCases}/${row.totalCases}`
      };
      
      // 将记录添加到历史任务列表的开头
      this.historyTasks.unshift(historyRecord);
      this.total = this.historyTasks.length; // 更新总条数为实际数据长度
      
      this.$message({
        type: 'success',
        message: `任务 ${row.taskId} 执行完成`
      });
    },
    generateReport(row) {
      this.$message({
        message: `正在生成任务 ${row.taskId} 的测试报告，请稍候...`,
        type: 'info'
      });
      
      // 模拟生成报告
      setTimeout(() => {
        this.$message({
          message: `测试报告已生成，可在"测试报告"菜单中查看`,
          type: 'success'
        });
      }, 1500);
    },
    viewCaseDetail(row) {
      this.$message({
        message: `查看用例 ${row.caseId} 的日志信息`,
        type: 'info'
      });
    },
    searchHistory() {
      this.$message({
        message: '正在查询历史记录...',
        type: 'info'
      });
      
      // 模拟搜索操作
      setTimeout(() => {
        // 根据日期范围过滤历史记录
        if (this.dateRange && this.dateRange.length === 2) {
          const startDate = this.dateRange[0];
          const endDate = this.dateRange[1];
          
          // 模拟根据日期范围获取新的历史记录
          const filteredHistoryTasks = [
            {
              taskId: 'TASK-H001',
              taskName: '接口测试-冒烟测试',
              startTime: '2023-10-24 15:30:00',
              endTime: '2023-10-24 15:45:20',
              status: '成功',
              duration: 920,
              success: '45/45'
            },
            {
              taskId: 'TASK-H002',
              taskName: '接口测试-回归测试',
              startTime: '2023-10-23 09:30:00',
              endTime: '2023-10-23 10:15:30',
              status: '失败',
              duration: 2730,
              success: '120/135'
            }
            // 可以根据日期范围返回不同的数据集
          ];
          
          this.historyTasks = filteredHistoryTasks;
          this.total = filteredHistoryTasks.length; // 更新总条数为实际数据长度
        }
        
        this.$message({
          message: '查询完成',
          type: 'success'
        });
      }, 800);
    },
    handleSizeChange(val) {
      this.pageSize = val;
      // 重新获取分页数据
      this.getHistoryTasksByPage();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      // 重新获取分页数据
      this.getHistoryTasksByPage();
    },
    handleCurrentTasksSizeChange(val) {
      this.currentTasksPageSize = val;
      this.fetchData();
    },
    handleCurrentTasksCurrentChange(val) {
      this.currentTasksPage = val;
      this.fetchData();
    },
    // 新增方法：根据页码和每页条数获取历史记录
    getHistoryTasksByPage() {
      // 在实际应用中，这里应该是调用API获取对应页的数据
      // 这里仅做模拟
      this.$message({
        message: '正在加载第' + this.currentPage + '页数据...',
        type: 'info'
      });
      
      setTimeout(() => {
        // 模拟不同页的数据
        const pageData = [
          // 第一页数据
          [
            {
              taskId: 'TASK-H001',
              taskName: '接口测试-冒烟测试',
              startTime: '2023-10-24 15:30:00',
              endTime: '2023-10-24 15:45:20',
              status: '成功',
              duration: 920,
              success: '45/45'
            },
            {
              taskId: 'TASK-H002',
              taskName: '接口测试-回归测试',
              startTime: '2023-10-23 09:30:00',
              endTime: '2023-10-23 10:15:30',
              status: '失败',
              duration: 2730,
              success: '120/135'
            },
            {
              taskId: 'TASK-H003',
              taskName: '功能验证-登录模块',
              startTime: '2023-10-22 14:20:00',
              endTime: '2023-10-22 14:35:12',
              status: '成功',
              duration: 912,
              success: '28/28'
            }
          ],
          // 更多页的数据...
        ];
        
        // 获取当前页的数据，如果超出页数返回空数组
        this.historyTasks = pageData[this.currentPage - 1] || [];
        
        // 这里设置总记录数，应该是从API获取的
        // 现在只是简单地设置为当前页的数据长度
        this.total = this.historyTasks.length;
        
        this.$message({
          message: '数据加载完成',
          type: 'success'
        });
      }, 800);
    },
    // 获取未执行用例数量
    getPendingCases(task) {
      if (!task || !task.totalCases) return 0;
      const success = task.successCases || 0;
      const failed = task.failedCases || 0;
      return task.totalCases - success - failed;
    },
    
    // 计算成功百分比
    getSuccessPercentage(task) {
      if (!task || !task.totalCases) return 0;
      // 将小数转为整数前，保留一位小数进行四舍五入，避免舍入误差
      return Math.round((task.successCases || 0) / task.totalCases * 1000) / 10;
    },
    
    // 计算失败百分比
    getFailPercentage(task) {
      if (!task || !task.totalCases) return 0;
      // 将小数转为整数前，保留一位小数进行四舍五入，避免舍入误差
      return Math.round((task.failedCases || 0) / task.totalCases * 1000) / 10;
    },
    
    // 计算未执行百分比 - 确保总和为100%
    getPendingPercentage(task) {
      if (!task || !task.totalCases) return 0;
      const success = this.getSuccessPercentage(task);
      const fail = this.getFailPercentage(task);
      const pending = 100 - success - fail;
      // 确保不会出现负数
      return pending < 0 ? 0 : pending;
    },
    
    // 计算跳过百分比
    getSkippedPercentage(task) {
      if (!task || !task.totalCases) return 0;
      // 将小数转为整数前，保留一位小数进行四舍五入，避免舍入误差
      return Math.round((task.skippedCases || 0) / task.totalCases * 1000) / 10;
    },
    
    // 初始化圆环图表
    initExecutionChart() {
      if (!this.currentTask || !this.currentTask.totalCases) return;
      
      console.log('Initializing charts...');
      
      // 在 DOM 更新后初始化图表
      this.$nextTick(() => {
        // 初始化主图表
        const mainChartEl = this.$refs.mainExecutionChart;
        if (mainChartEl) {
          console.log('Main chart element found:', mainChartEl);
          
          // 如果已有图表实例，先销毁
          if (this.mainExecutionChart) {
            this.mainExecutionChart.dispose();
            this.mainExecutionChart = null;
          }
          
          try {
            // 确保容器尺寸正确
            mainChartEl.style.width = '400px';
            mainChartEl.style.height = '400px';
            
            // 获取百分比，确保总和为100%
            const successPercent = this.getSuccessPercentage(this.currentTask);
            const failPercent = this.getFailPercentage(this.currentTask);
            const pendingPercent = this.getPendingPercentage(this.currentTask);
            const skippedPercent = this.getSkippedPercentage(this.currentTask);
            
            // 初始化图表
            this.mainExecutionChart = echarts.init(mainChartEl);
            
            // 设置图表配置
            const option = {
              title: {
                text: '状态比例分布',
                left: 'center',
                top: '5%',
                textStyle: {
                  fontSize: 16
                }
              },
              tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}: {c} ({d}%)'
              },
              legend: {
                orient: 'vertical',
                left: '5%',
                top: 'center',
                data: ['成功', '失败', '未执行', '跳过'],
                textStyle: {
                  fontSize: 14,
                  width: 100,
                  overflow: 'truncate'
                },
                itemWidth: 10,
                itemHeight: 10,
                itemGap: 15
              },
              series: [
                {
                  name: '执行状态',
                  type: 'pie',
                  center: ['60%', '50%'],
                  radius: ['40%', '70%'],
                  avoidLabelOverlap: false,
                  itemStyle: {
                    borderRadius: 6,
                    borderWidth: 2,
                    borderColor: '#fff'
                  },
                  label: {
                    show: true,
                    position: 'inside',
                    formatter: '{d}%',
                    fontSize: 14,
                    fontWeight: 'bold',
                    color: '#fff'
                  },
                  emphasis: {
                    label: {
                      show: true,
                      fontSize: 16,
                      fontWeight: 'bold'
                    },
                    itemStyle: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                  },
                  labelLine: {
                    show: false
                  },
                  data: [
                    { 
                      value: successPercent, 
                      name: '成功',
                      itemStyle: { color: '#67C23A' }
                    },
                    { 
                      value: failPercent, 
                      name: '失败',
                      itemStyle: { color: '#F56C6C' }
                    },
                    { 
                      value: pendingPercent, 
                      name: '未执行',
                      itemStyle: { color: '#909399' }
                    },
                    { 
                      value: skippedPercent, 
                      name: '跳过',
                      itemStyle: { color: '#E6A23C' }
                    }
                  ]
                }
              ]
            };
            
            // 使用配置项设置图表
            this.mainExecutionChart.setOption(option);
            console.log('Main chart initialized successfully');
          } catch (error) {
            console.error('Failed to initialize main chart:', error);
          }
        } else {
          console.error('Main chart element not found!');
        }
        
        // ... 其余的图表初始化代码 ...
      });
    },
    // 新增方法用于调整图表大小
    resizeCharts() {
      if (this.mainExecutionChart) {
        // 获取容器实际大小
        const container = this.$refs.mainExecutionChart;
        const width = container.clientWidth;
        const height = container.clientHeight;
        
        // 根据容器大小调整图表配置
        const option = this.mainExecutionChart.getOption();
        
        // 根据容器宽度调整图例位置和图表中心点
        if (width < 600) {
          option.legend.orient = 'horizontal';
          option.legend.left = 'center';
          option.legend.top = 'bottom';
          option.legend.bottom = '5%';
          option.series[0].center = ['50%', '45%'];
        } else {
          option.legend.orient = 'vertical';
          option.legend.left = '5%';
          option.legend.top = 'center';
          option.series[0].center = ['60%', '50%'];
        }
        
        // 应用新的配置
        this.mainExecutionChart.setOption(option);
        this.mainExecutionChart.resize();
      }
      if (this.executionChart) {
        this.executionChart.resize();
      }
    },
    calculateElapsedTime(task) {
      if (!task || !task.startTime) return 0;
      const startTime = new Date(task.startTime.replace(/-/g, '/'));
      const endTime = new Date();
      const elapsedTime = Math.floor((endTime - startTime) / 1000);
      return elapsedTime;
    },
    viewCaseInfo(row) {
      this.$message({
        message: `查看用例 ${row.caseId} 的详细信息`,
        type: 'info'
      });
    },
  }
}
</script>

<style>
/* 添加最强的CSS选择器确保覆盖Element UI默认样式 */
body .el-table:before,
body .el-table::before, 
body .el-table:after,
body .el-table::after,
html body .el-table:before,
html body .el-table::before {
  display: none !important;
  height: 0 !important;
  visibility: hidden !important;
  opacity: 0 !important;
  content: none !important;
  border: none !important;
  position: absolute !important;
  top: -9999px !important;
  left: -9999px !important;
}

/* 确保所有表格元素无边框 */
.el-table, 
.el-table__header,
.el-table__body,
.el-table__footer,
.el-table .el-table__header-wrapper,
.el-table .el-table__body-wrapper,
.el-table .el-table__footer-wrapper {
  border: none !important;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  background: transparent !important;
}

/* 表格容器覆盖 */
.borderless-table:before,
.remove-border-patch:before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 2px !important;
  background-color: white !important;
  z-index: 9999 !important;
}
</style>

<style scoped>
/* 覆盖父容器的样式 */
:deep(.el-main) {
  padding: 0 !important;
}

.ecuprocess-container {
  padding: 16px 0 0 0;  /* 移除左右内边距，保留顶部内边距 */
  min-height: auto;
  background-color: #fff;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.page-title {
  margin: 0 0 16px 16px;  /* 保持标题的左边距 */
  color: #2C3E50;
  font-size: 24px;
}

/* 新的无阴影主内容容器 */
.main-content {
  width: 100%;
  box-shadow: none !important;
  background-color: transparent !important;
  border: none !important;
}

/* 部分标题样式 */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border: none !important;
  box-shadow: none !important;
  background-color: transparent !important;
}

/* 表格容器样式 */
.table-container {
  position: relative;
  border: none !important;
  box-shadow: none !important;
  background-color: transparent !important;
}

/* 无阴影类 */
.no-shadow {
  box-shadow: none !important;
  border: none !important;
  background-color: transparent !important;
  outline: none !important;
}

/* 历史记录区域样式 */
.history-section {
  margin-top: 30px;
  border: none !important;
  box-shadow: none !important;
  background-color: transparent !important;
}

.loading-container {
  padding: 20px;
}

.empty-tasks {
  padding: 40px 0;
}

.pagination-container {
  padding: 16px 16px 16px 16px; /* 保持左右和下边距，移除上边距 */
  display: flex;
  justify-content: center;
  align-items: center;
  border-top: none !important;
}

:deep(.el-pagination) {
  display: flex;
  justify-content: center;
  align-items: center;
}

.log-content {
  height: 300px;
  overflow-y: auto;
  background-color: #f5f5f5;
  padding: 10px;
  border-radius: 4px;
  font-family: monospace;
  line-height: 1.5;
  white-space: pre-wrap;
}

.task-list {
  margin: 0;
  padding: 0;
}

/* 强制移除所有边框线和背景色 */
:deep(.el-table),
:deep(.el-table__header),
:deep(.el-table__footer) {
  border: 0 none !important;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  background-color: transparent !important;
  background: transparent !important;
}

/* 移除所有奇偶行样式 */
:deep(.borderless-table .el-table__row),
:deep(.borderless-table .el-table__row:nth-child(odd)),
:deep(.borderless-table .el-table__row:nth-child(even)),
:deep(.borderless-table .el-table__body tr.el-table__row),
:deep(.borderless-table .el-table__body tr.el-table__row:nth-child(odd)),
:deep(.borderless-table .el-table__body tr.el-table__row:nth-child(even)) {
  background-color: transparent !important;
  background: transparent !important;
}

:deep(.borderless-table .el-table__row:hover) td,
:deep(.borderless-table .el-table__row--striped) td,
:deep(.borderless-table .el-table__row--striped:hover) td {
  background-color: transparent !important;
  background: transparent !important;
}

:deep(.borderless-table .el-table__header-row) {
  background-color: transparent !important;
  background: transparent !important;
}

/* 操作按钮容器样式 */
.operation-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  min-height: 32px;
}

/* 统一按钮样式 */
:deep(.operation-buttons .el-button) {
  width: 88px !important;
  height: 32px;
  padding: 0;
  margin: 0;
  font-size: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

:deep(.operation-buttons .el-button + .el-button) {
  margin-left: 8px;
}

/* 确保按钮文字居中且不换行 */
:deep(.operation-buttons .el-button span) {
  display: inline-block;
  width: 100%;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 确保表格单元格内容垂直居中 */
:deep(.el-table td),
:deep(.el-table th) {
  padding: 8px 0;
  text-align: center !important;
}

/* 确保按钮在单元格中垂直居中 */
:deep(.el-table .cell) {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  text-align: center;
}

/* 确保所有表格文本居中 */
:deep(.el-table__body),
:deep(.el-table__header),
:deep(.el-table__footer) {
  text-align: center !important;
}

/* 表格文本居中 */
:deep(.el-table--enable-row-hover .el-table__body tr:hover td),
:deep(.el-table__body tr.hover-row td) {
  text-align: center !important;
}

/* 确保描述列表内容也居中 */
:deep(.el-descriptions-item__content) {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 确保表头文字居中 */
:deep(.el-table th > .cell) {
  text-align: center !important;
}

/* 确保文本按钮居中 */
:deep(.el-button--text) {
  text-align: center;
  margin: 0 auto;
  display: block;
}

/* 确保进度条在单元格中居中 */
:deep(.el-progress) {
  width: 100%;
}

/* 覆盖Element UI进度条灰色轨道背景为白色 - 使用最高优先级选择器 */
:deep(.el-progress-circle__track),
:deep(.el-progress-dashboard__track),
:deep(.el-progress-bar__outer),
:deep(.el-progress) .el-progress-circle__track,
:deep(.el-progress) .el-progress-dashboard__track,
:deep(.el-progress) .el-progress-bar__outer {
  stroke: #fff !important;
  background-color: #fff !important;
}

/* 为确保覆盖默认样式，添加额外的选择器增加优先级 */
html body :deep(.el-progress-circle__track),
html body :deep(.el-progress-dashboard__track),
html body :deep(.el-progress-bar__outer),
html body :deep(.el-progress) .el-progress-circle__track,
html body :deep(.el-progress) .el-progress-dashboard__track,
html body :deep(.el-progress) .el-progress-bar__outer {
  stroke: #fff !important;
  background-color: #fff !important;
}

:deep(.el-progress-circle__path),
:deep(.el-progress-dashboard__path) {
  stroke-linecap: round !important;
}

/* 确保圆环内部区域也为白色 */
:deep(.el-progress-circle),
:deep(.el-progress-dashboard),
:deep(.el-progress) .el-progress-circle,
:deep(.el-progress) .el-progress-dashboard {
  background-color: #fff !important;
}

/* 覆盖SVG轨道元素的颜色 */
:deep(svg path[data-old-stroke]),
:deep(.el-progress svg path:not([data-old-color])) {
  stroke: #fff !important;
}

/* 直接通过内联样式覆盖 */
::v-deep .el-progress svg path:not([data-old-color]) {
  stroke: #fff !important;
}

/* 使用!important覆盖SVG元素样式 */
:deep(.el-progress) svg .el-progress-circle__track,
:deep(.el-progress) svg .el-progress-dashboard__track {
  stroke: #fff !important;
}

/* 重写历史记录区域样式，彻底移除边框 */
.history-section {
  margin-top: 30px; /* 保持上边距 */
  border: none !important;
  border-top: none !important; 
  position: relative;
  background-color: transparent !important;
}

.history-section::before,
.history-section::after {
  display: none !important;
  content: none !important;
}

/* 确保历史记录标题和表头没有边框 */
.history-header,
.history-section :deep(.el-table__header) {
  border: none !important;
  border-top: none !important;
  border-bottom: none !important;
}

/* 新增无边框类 */
.no-border {
  border: none !important;
  border-top: none !important;
  border-bottom: none !important;
  border-left: none !important;
  border-right: none !important;
  background: transparent !important;
}

/* 移除卡片组件的内部边框 */
:deep(.el-card__header) {
  border-bottom: 0 none !important;
  padding-bottom: 0 !important;
}

.history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border: none !important;
  border-top: none !important;
  border-bottom: none !important;
}

/* 移除所有可能的边框 */
:deep(.el-table thead),
:deep(.el-table thead tr),
:deep(.el-table thead th) {
  border: none !important;
  border-bottom: none !important;
}

/* 更具体的边框移除规则 */
:deep(.el-table thead),
:deep(.el-table__header),
:deep(.el-table__header tr th) {
  background-color: transparent !important;
  background: transparent !important;
  border: none !important;
  border-top: none !important;
  border-bottom: none !important;
  border-left: none !important;
  border-right: none !important;
}

/* 移除表格边线 - 针对特定问题 */
:deep(.el-table:not(.el-table--border) > .el-table__header-wrapper > table > thead > tr:first-child th:last-child),
:deep(.el-table:not(.el-table--border) > .el-table__body-wrapper > table > tbody > tr:first-child td:last-child),
:deep(.el-table:not(.el-table--border) > .el-table__fixed-body-wrapper > table > tbody > tr:first-child td:last-child),
:deep(.el-table:not(.el-table--border) > .el-table__fixed-header-wrapper > table > thead > tr:first-child th:last-child) {
  border: none !important;
  border-top: none !important;
  border-bottom: none !important;
  border-left: none !important;
  border-right: none !important;
}

/* 完全移除任何可能的线条 - 最高优先级 */
:deep(.el-table),
:deep(.el-table::before),
:deep(.el-table::after),
:deep(.el-table__header-wrapper),
:deep(.el-table__body-wrapper),
:deep(.el-table__footer-wrapper) {
  border: none !important;
  border-color: transparent !important;
  border-style: none !important;
  border-width: 0 !important;
  outline: none !important;
}

/* 历史记录区域强制覆盖 */
.history-section::before,
.history-section::after {
  border: none !important;
  display: none !important;
  content: none !important;
}

/* 禁用所有表格外框线 */
:deep(.el-table--border::after),
:deep(.el-table--group::after),
:deep(.el-table--group),
:deep(.el-table--border) {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* 白色覆盖层技术 */
.task-list {
  position: relative;
}

.task-list::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background-color: white;
  z-index: 100;
}

/* 历史记录区域的白色覆盖层 */
.history-section {
  position: relative;
}

.history-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background-color: white;
  z-index: 100;
}

/* 新增状态统计相关样式 */
.statistics-container {
  padding: 20px;
}

.main-title {
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  margin: 0 0 30px 0;
  color: #333;
}

.charts-layout {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 30px;
}

.left-panel {
  flex: 1;
  min-width: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.right-panel {
  flex: 1;
  min-width: 300px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  padding: 20px;
}

.main-progress-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.status-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 15px;
}

.dashboard-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.dashboard-stats {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.big-number {
  font-size: 32px;
  font-weight: bold;
  color: #333;
}

.big-label {
  font-size: 16px;
  color: #666;
  margin-top: 5px;
}

.status-legend {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.color-box {
  width: 14px;
  height: 14px;
  border-radius: 3px;
}

.success-color {
  background-color: #67C23A;
}

.fail-color {
  background-color: #F56C6C;
}

.pending-color {
  background-color: #909399;
}

.skipped-color {
  background-color: #E6A23C;
}

.mini-progress-row {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 20px;
}

.mini-progress-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

.status-label {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.status-number {
  font-size: 16px;
  color: #666;
}

.status-counts {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 30px;
  flex-wrap: wrap;
}

.count-item {
  display: flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: 4px;
  background-color: #fff;
}

.count-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-right: 8px;
}

.count-item.success .count-dot {
  background-color: #67C23A;
}

.count-item.fail .count-dot {
  background-color: #F56C6C;
}

.count-item.pending .count-dot {
  background-color: #909399;
}

.count-item.skipped .count-dot {
  background-color: #E6A23C;
}

.count-label {
  font-size: 14px;
  font-weight: bold;
}

/* 任务执行总括样式 - 去掉红色边框 */
.task-execution-summary {
  border: 1px solid #e6e6e6;
  border-radius: 4px;
  margin-top: 20px;
  margin-bottom: 20px;
  overflow: hidden;
  background-color: #fff;
}

.task-execution-summary .summary-header {
  font-size: 16px;
  font-weight: bold;
  padding: 12px 15px;
  background-color: #fff;
  border-bottom: 1px solid #e6e6e6;
  text-align: left;
}

.task-execution-summary .summary-body {
  padding: 15px;
  display: flex;
  flex-direction: column;
}

.task-execution-summary .summary-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.task-execution-summary .summary-item {
  flex-basis: 48%;
  display: flex;
  align-items: flex-start;
  text-align: left;
}

.task-execution-summary .summary-label {
  font-weight: bold;
  margin-right: 10px;
  text-align: left;
  color: #606266;
}

.task-execution-summary .summary-value {
  text-align: left;
  color: #333;
}

@media (max-width: 768px) {
  .charts-layout {
    flex-direction: column;
  }
  
  .left-panel,
  .right-panel {
    width: 100%;
  }
  
  .mini-progress-row {
    flex-direction: column;
  }
}

/* 状态标签样式 */
:deep(.el-tag) {
  width: 80px !important;
  text-align: center;
  justify-content: center;
  padding: 0 !important;
}

:deep(.el-tag span) {
  display: inline-block;
  width: 100%;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 描述组件内容居中 */
:deep(.centered-descriptions) {
  width: 100%;
}

:deep(.centered-descriptions .el-descriptions-item__label) {
  text-align: right;
  justify-content: flex-end;
  padding-right: 30px;
}

:deep(.centered-descriptions .el-descriptions-item__content) {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

:deep(.centered-descriptions .el-descriptions-item__container) {
  display: flex;
  align-items: center;
}

/* 对话框内容垂直居中 */
:deep(.el-dialog__body) {
  padding-top: 10px;
}

/* 确保统计数据居中显示 */
.summary-content p {
  display: flex;
  justify-content: center;
  text-align: center;
}

/* 确保数值类单元格内容居中 */
:deep(.cell) {
  word-break: normal;
  white-space: nowrap;
  text-align: center;
}

/* 重写Element UI表格cell默认样式以确保完全居中 */
:deep(.el-table .cell) {
  box-sizing: border-box;
  white-space: normal;
  word-break: break-all;
  line-height: 23px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 修复表头字体垂直居中 */
:deep(.el-table th) {
  padding: 12px 0;
  background-color: transparent !important;
  color: #333;
  font-weight: bold;
  text-align: center;
}

/* 修复内容框在单元格中的居中问题 */
:deep(.el-table td div) {
  margin: 0 auto;
}

/* 类型名称设为统一的字体大小和颜色 */
:deep(.el-table .cell .name) {
  font-size: 14px;
  color: #333;
  text-align: center;
}

/* 确保描述的第一列显示右对齐，第二列显示居中 */
:deep(.el-descriptions-item.is-bordered-label .el-descriptions-item__label) {
  width: 30%;
  text-align: right;
  padding-right: 20px;
  color: #606266;
  background: #fff;
}

:deep(.el-descriptions-item.is-bordered-label .el-descriptions-item__content) {
  width: 70%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 直接修改所有progress组件中track元素的颜色为白色 */
:deep(.mini-progress-item) .el-progress .el-progress-circle__track,
:deep(.main-progress-container) .el-progress .el-progress-dashboard__track {
  stroke: #fff !important;
}

/* 针对特定的未执行状态进度条 */
:deep(.mini-progress-item:nth-child(3)) .el-progress .el-progress-circle__track {
  stroke: #fff !important;
  fill: none !important;
}

/* 强制所有SVG中的轨道路径为白色 */
:deep(.el-progress) svg path.el-progress-circle__track,
:deep(.el-progress) svg path.el-progress-dashboard__track {
  stroke: #fff !important;
  fill: none !important;
}

/* 直接通过style属性覆盖 */
:deep(.el-progress svg path) {
  stroke: attr(data-old-color) !important;
}
:deep(.el-progress svg path[stroke="#E5E9F2"]),
:deep(.el-progress svg path[stroke="#e5e9f2"]),
:deep(.el-progress svg path[stroke="#909399"]) {
  stroke: #fff !important;
}

/* 使用!important强制覆盖"未执行"状态的灰色轨道 */
:deep(.el-progress) circle.el-progress-circle__track,
:deep(.el-progress) path.el-progress-circle__track {
  stroke: #fff !important;
}

/* 使用内联覆盖 */
:deep(.el-progress[data-status="pending"]) .el-progress-circle__track,
:deep(.el-progress-circle__track[stroke="#E5E9F2"]) {
  stroke: #fff !important;
}

/* 最强的SVG属性覆盖 */
:deep(.mini-progress-item:nth-child(3) .el-progress svg *[stroke]) {
  stroke: #fff !important;
}

/* 通过动态注入样式覆盖 */
@supports (color: var(--)) {
  :deep(.el-progress) {
    --el-progress-bg-color: #fff !important;
  }
}
</style>
